<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>商户系统 - </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" id="mainSiteIcon" type="image/x-icon" />
    <link rel="stylesheet" href="start/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="src/style/home.css" media="all">
</head>

<body>
<div class="header">
    <div class="main-mask"></div>
    <div class="header-background"></div>
    <div class="logo-box" id="siteLogo"></div>
    <div class="switch">
        <div class="switch-line"></div>
        <div class="switch-line"></div>
    </div>
    <div class="header-link-box">
        <a href="/">首页</a>
        <a href="/demo.html">支付体验</a>
        <a class="top-nav-link" href="/start/index.html#/user/login">
            <div class="web-link">商户登录</div>
            <img src="/images/home/arrow1CB7A2.svg" alt="" class="link-arrow" />
        </a>
    </div>
</div>
<div class="container">
    <div class="top-pallet">
        <div class="top-background">
            <div class="title-cn" id="mainAdvert"></div>
            <div class="title-en" id="mainAdvertEn"></div>
            <div class="text-content" id="subAdvert"></div>
        </div>
        <div class="top-background-img">
            <img id="mchHomeBanner" src="/images/home/top-background-img.png" alt="" />
        </div>
    </div>
    <div class="adv-pallet">
        <div class="adv-room">
            <div class="adv-item-box">
                <div class="adv-item">
                    <div class="adv-title-box">
                        <div class="adv-title-icon">
                            <img src="/images/home/pay-prodoct-icon.svg" alt="" />
                        </div>
                        <div class="titile-text">支付产品</div>
                    </div>
                    <div class="adv-content-text">
                        提供微信、支付宝、云闪付等聚合收款产品
                    </div>
                </div>
            </div>

            <div class="adv-item-box">
                <div class="adv-item">
                    <div class="adv-title-box">
                        <div class="adv-title-icon">
                            <img src="/images/home/opera-tool-icon.svg" alt="" />
                        </div>
                        <div class="titile-text">运营工具</div>
                    </div>
                    <div class="adv-content-text">
                        包括运行平台、代理商系统、商户系统
                    </div>
                </div>
            </div>

            <div class="adv-item-box">
                <div class="adv-item">
                    <div class="adv-title-box">
                        <div class="adv-title-icon">
                            <img src="/images/home/fund-manage-icon.svg" alt="" />
                        </div>
                        <div class="titile-text">资金管理</div>
                    </div>
                    <div class="adv-content-text">
                        为商家提供收款、代付等资金解决方案
                    </div>
                </div>
            </div>

            <div class="adv-item-box">
                <div class="adv-item">
                    <div class="adv-title-box">
                        <div class="adv-title-icon">
                            <img src="/images/home/extend-tool-icon.svg" alt="" />
                        </div>
                        <div class="titile-text">扩展工具</div>
                    </div>
                    <div class="adv-content-text">
                        开放技术能力，提供安全稳定的API接口
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="step-pallet">
        <div class="step-title-box">
            <div class="step-title-text">
                简单<span style="color: #1cb7a2">3</span>步，接入聚合支付
            </div>
        </div>
        <div class="step-content-pallet">
            <div class="step-item-box">
                <div class="step-number-box">
                    <div>1</div>
                </div>
                <div class="step-item-title">申请商户</div>
                <div class="step-item-text">申请成为平台商户</div>
            </div>

            <div class="arrow-too">
                <img src="/images/home/too-arrow.svg" alt="" />
            </div>

            <div class="step-item-box">
                <div class="step-number-box">
                    <div>2</div>
                </div>
                <div class="step-item-title">对接API</div>
                <div class="step-item-text">
                    集成SDK或对接API按文档所需进行对接即可
                </div>
            </div>

            <div class="arrow-too">
                <img src="/images/home/too-arrow.svg" alt="" />
            </div>

            <div class="step-item-box">
                <div class="step-number-box">
                    <div>3</div>
                </div>
                <div class="step-item-title">正式使用</div>
                <div class="step-item-text">集成好后即可使用聚合支付</div>
            </div>
        </div>
        <div class="step-background"></div>
    </div>
    <div class="solution-pallet">
        <div class="solution-title-box">
            <div>行业解决方案</div>
        </div>
        <div class="solution-item-pallet">
            <div class="solution-item-box">
                <div class="solution-item">
                    <img src="/images/home/solution-a-img.png" alt="" />
                    <div class="solution-mask">
                        <div class="solution-item-title-box">
                            <div class="solution-item-icon-box">
                                <img src="/images/home/olret-icon.svg" alt="" />
                            </div>
                            <div class="solution-title-text">智慧电商</div>
                        </div>
                        <div class="solution-content">
                            <div class="solution-text-height">
                                随着巨头的形成，流量获取越加困难，获客成本居高不下。我们希望通过汇智整合能力，帮助电商从业者挖掘到新的流量洼地，整合公众平台内容、服务等多方能力，为用户提供更友好的购物体验。
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="solution-item-box">
                <div class="solution-item">
                    <img src="/images/home/solution-b-img.png" alt="" />
                    <div class="solution-mask">
                        <div class="solution-item-title-box">
                            <div class="solution-item-icon-box">
                                <img src="/images/home/store-icon.svg" alt="" />
                            </div>
                            <div class="solution-title-text">商超、便利店</div>
                        </div>
                        <div class="solution-content">
                            <div class="solution-text-height">
                                商超便利店行业逐步在开展智慧门店项目。用户进店后，即可识别身份，在门店进行小程序扫码购、自助收银等自助服务；支付前后，企业可运用汇智大数据，对用户进行精准触达，提升转化率、客单与复购。
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="solution-item-box">
                <div class="solution-item">
                    <img src="/images/home/solution-c-img.png" alt="" />
                    <div class="solution-mask">
                        <div class="solution-item-title-box">
                            <div class="solution-item-icon-box">
                                <img src="/images/home/school-icon.svg" alt="" />
                            </div>
                            <div class="solution-title-text">高校</div>
                        </div>
                        <div class="solution-content">
                            <div class="solution-text-height">
                                汇智触达能力协助学校精准触达到每一位师生；汇智小程序则可将教务、教学设施和生活设施的管理线上化；同时汇智智慧校园卡也让学生可以做到免带卡畅行校园，实现无卡进出图书馆，线下消费等。
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="solution-item-box">
                <div class="solution-item">
                    <img src="/images/home/solution-d-img.png" alt="" />
                    <div class="solution-mask">
                        <div class="solution-item-title-box">
                            <div class="solution-item-icon-box">
                                <img src="/images/home/stop-icon.svg" alt="" />
                            </div>
                            <div class="solution-title-text">停车场</div>
                        </div>
                        <div class="solution-content">
                            <div class="solution-text-height">
                                我们希望通过汇智智慧停车场自助化服务流程，随时随地缴纳停车费，无需排队等待，并提供自助查车、寻车、缴费，大量释放人力，收集顾客造访状态，与顾客实时交流，提供多种异业合作可能。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="div-line"></div>
        <div class="footer-pallet">
            <div class="copyright" id="copyRight"></div>
            <div class="links-box">
                <p id="serviceTel"></p>
                <p id="serviceQQ" style="margin-right: 30px"></p>
                <a href="">关于我们</a>
                <a href="">开发文档</a>
            </div>
        </div>
    </div>
</div>
</body>
<script src="start/layui/layui.js"></script>
<script>
    layui.use(['form'], function(){
        var $ = layui.$
            ,form = layui.form;

        //变更网站标题
        $.ajax({
            async: false, type: 'get',
            url: 'api/auth/siteTitle',
            success: function(res){

                $('title').append(res.data.siteTitle);
                $("#siteLogo").append('<img src="'+res.data.siteLogo+'" style="height: 30px;" alt="'+res.data.siteTitle+'">');
                if (res.data.mchHomeBanner) {
                    $("#mchHomeBanner").attr('src', res.data.mchHomeBanner);
                }
                $("#copyRight").text(res.data.copyRight);
                $("#mainAdvert").text(res.data.mainAdvert);
                $("#mainAdvertEn").text(res.data.mainAdvertEn);
                $("#subAdvert").text(res.data.subAdvert);
                $("#serviceTel").append(res.data.serviceTel);
                $("#serviceQQ").append(res.data.serviceQQ);

                let siteIcon = res.data.siteIcon;
                if(siteIcon.startsWith("http://") || siteIcon.startsWith("https://")){
                    layui.$("#mainSiteIcon")[0].href = siteIcon;
                }else{
                    layui.$("#mainSiteIcon")[0].href = window.location.origin + siteIcon;
                }
            }
        });

        function headerBackgroundWidth() {
            var headerWidth = $(".header").outerWidth();
            $(".header-background").css({
                width: headerWidth + "px",
            });
        }

        headerBackgroundWidth();

        function headerRoll() {
            var windowRollSize = $(window).scrollTop();
            scrollScale = windowRollSize / 4;
            scrollInt = Math.round(scrollScale);
            backgrounOpacity = scrollInt / 100;
            if (windowRollSize > 400) {
                $(".header-background").css({
                    opacity: 1,
                });
            } else if (windowRollSize <= 400) {
                $(".header-background").css({
                    opacity: backgrounOpacity,
                });
            }
            // console.log(backgrounOpacity);
        }

        $(window).scroll(function () {
            headerRoll();
        });

        function stepBackgroundPosition() {
            var stepHeight = $(".step-content-pallet").outerHeight();
            stepBackgroundHeight = stepHeight / 2;
            $(".step-background").css({
                height: stepBackgroundHeight + "px",
            });
        }

        $(".solution-mask").hover(
            function () {
                var textHeight = $(this).find(".solution-text-height").outerHeight();
                windowSize = $(window).outerWidth();
                if (windowSize > 768) {
                    $(this)
                        .find(".solution-content")
                        .css({
                            height: textHeight + "px",
                        });
                }
            },
            function () {
                windowSize = $(window).outerWidth();
                if (windowSize > 768) {
                    $(this)
                        .find(".solution-content")
                        .css({
                            height: 0 + "px",
                        });
                }
            }
        );

        stepBackgroundPosition();

        $(window).resize(function () {
            headerBackgroundWidth();
            stepBackgroundPosition();
        });


        $(".switch").on("click", function(){
            $(".main-mask").css({
                visibility: "visible",
                opacity: 1
            })
            $(".header-link-box").css({
                visibility: "visible",
                opacity: 1
            })
            $(".header-background").css({
                opacity: 1 ,
                width: '100vw'
            })
            $('body').css({
                overflow: 'hidden'
            })
            $(".switch").css({
                background: 'rgba(28,183, 162, 1)'
            })
        })

        $(".main-mask").on("click", function(){
            $(".main-mask").css({
                visibility: "hidden",
                opacity: 0
            })
            $(".header-link-box").css({
                visibility: "hidden",
                opacity: 0
            })
            $(".header-background").css({
                width: '100%'
            })
            headerRoll();
            $('body').css({
                overflow: 'auto'
            })
            $(".switch").css({
                background: 'rgba(28,183, 162, 0)'
            })
        })

        form.render();

    });
</script>
</html>
